<template>
	<view class="main">
		<uni-section title='before-color' type="line" padding>
			<view class="before-a">
				<text class="title"> 这是个标题</text>
			</view>
		</uni-section>
		<uni-section title='before-image' type="line" padding>
			<view class="before-b">
				<text class="title"> 这是个标题</text>
			</view>
		</uni-section>
		<uni-section title='card' type="line" padding class="u-section">
			<view class="card">
				<view class="card-title">
					<text>我的订单</text>
					<text class="sub-title">查看所有订单</text>
				</view>
				<view class="card-content">
					<text class="icon-currency item">待支付</text>
					<text class="icon-currency item">待支付</text>
					<text class="icon-currency item">待支付</text>
					<text class="icon-currency item">待支付</text>
				</view>
			</view>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		
	}
	.u-section {
		background-color: #bebebe;
	}
	.main{
		background-color: #cccccc;
	}
	.before-a {
		.title {
			display: flex;
			align-items: center;
			&::before {
				content: '';
				width: 10rpx;
				height: 10rpx;
				background-color: red;
				margin-right: 20rpx;
			}
		}
	}
	.before-b {
		display: flex;
		justify-content: space-between;
		align-items: center;
		&::before,&::after {
			content: '';
			width: 40rpx;
			height: 40rpx;
			background-image: url('../../static/logo.png');
			background-size: contain;
			margin: 20rpx;
		}
	}
	.card {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		.card-title {
			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			font-size: 28rpx;
			.sub-title{
				color: #cccccc;
				font-size: #939393;
				float: right;
				&::after{
					margin-left: 5rpx;
					content: "\e6c2";
					font-family: "erabbit" !important;
				}
			}
		}
		.card-content {
			display: flex;
			justify-content: space-between;
			padding: 40rpx 20rpx 0;
			.item {
				text-align: center;
				font-size: 28rpx;
				&::before{
					display: block;
					font-size: 60rpx;
					color: orange;
					margin-bottom: 10rpx;
				}
			}
		}
		
	}

</style>
